<template>
	<view>
		<!-- <image style="width: 100%;" mode="widthFix" src="/static/swiper1.png"></image> -->

		<view class="uni-padding-wrap">
			<!-- <view class="page-section swiper"> -->
			<!-- <view class="page-section-spacing"> -->
			<swiper class="swiper" circular="true" indicator-dots="true" autoplay="true" interval="3500" duration="600">
				<swiper-item class="swiper-list" v-for="(item, index) in bannerList" :key="index">
					<view class="swiper-item uni-bg-red">
						<image class="swiper-img" :src="item.imageUrl" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
			<!-- </view> -->
			<!-- </view> -->
		</view>
		<!-- 导航栏 -->
		<view class="cu-list grid solids-bottom col-4 no-border">
			<view class="cu-item" v-for="(item, index) in categories" :key="index"
				:style="[{ animation: 'show ' + ((index + 1) * 0.2 + 1) + 's 1' }]" @click="goCategorieslist(item)"
				:data-mid="item.mid">
				<view :class="['cuIcon-' + item.cuIcon, 'text-' + item.color]">
					<view class="cu-tag badge" v-if="item.count != 0">
						<block v-if="item.badge != 1">{{ item.badge > 99 ? '99+' : item.badge }}</block>
					</view>
				</view>
				<text>{{ item.name }}</text>
			</view>
		</view>
		<view class="flex_all">
			<image @click="Go_teacher" class="jn_img" src="https://zhoukaiwen.com/img/index_hz2.jpg"></image>
			<image @click="Go_Student" class="jn_img" src="https://zhoukaiwen.com/img/index_hz2.jpg"></image>

		</view>

		<view class="cu-bar bg-white margin-top-xs">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">热门教师</text>
				<text class="text-ABC text-blue">Success</text>
			</view>
			<view class="action" @click="goVideo"><text class="text-lg text-grey text-shadow">更多</text></view>
		</view>
		<view>
			<u-list :scrollable="false">
				<u-list-item v-for="(item, index) in noticelist" :key="index">



					<view class=" mtop2" @click="handleClick(item)">
						<view class="cu-item shadow">
							<view class="PhotographerBoxL">
								<view class="cu-avatar round  ">

									<u-avatar size="50" :src="url_prefix+item.remark1"></u-avatar>

								</view>

								<view class="text-bold margin-top-sm">{{item.teacherName}}({{item.teacherGender}})
								</view>
								<view class='cu-tag2 margin-top-xs bg-blue radius'>{{item.teacherSchool || "暂无"}}</view>
								<view class="text-xs margin-top-sm   bg-blue light radius">专业：{{item.teacherSpeciality}}
								</view>
							</view>
							<view class="PhotographerBoxR">
								<view class="text   text-black light radius mtop">教学方式:{{item.teachingMethod}}</view>
								<view class="text-sm text-grey margin-top-xs text mtop">{{item.teacherDescribe}}</view>

								<view class="PhotoPpl margin-top-xs flex justify-start">
									<view class=" text-black">科目：</view>
									<view class="cu-tag margin-right-xs bg-olive light radius">
										{{item.teachingParentingSubjects1}}

									</view>
									<view class="cu-tag bg-purple light radius" v-if="item.teachingParentingSubjects2">
										{{item.teachingParentingSubjects2}}
									</view>

									<view class="cu-tag bg-pink light radius" v-if="item.teachingParentingSubjects3">
										{{item.teachingParentingSubjects3}}
									</view>

								</view>
								<view class="PhotoPpl margin-top-xs flex justify-start">
									<view class=" text-black">地区：</view>
									<view class="cu-tag   bg-blue light radius">
										{{item.teachingArea1}}
									</view>
									<view class="cu-tag bg-mauve light radius" v-if="item.teachingArea2">
										{{item.teachingArea2}}
									</view>
									<view class="cu-tag bg-cyan light radius" v-if="item.teachingArea3">
										{{item.teachingArea3}}
									</view>

								</view>
							</view>
							<view class="padding-sm text-center fl text-bold text-blue goPhotographer">联系名师</view>
						</view>



					</view>
				</u-list-item>
			</u-list>
		</view>


	</view>
</template>

<script>
	import QQMapWX from "@/util/qqmap-wx-jssdk.min.js";
	export default {

		data() {
			return {
				height: 0,
				//纬度
				url_prefix: this.http.ipAddress.replace(/\/$/, ''),
				position: {
					latitude: "",
					//经度
					longitude: "",
					address: ""
				},
				noticelist: [],
				editFormFields: {

					auditStatus: '已审核',
					remark2: "是"
				},
				swiperList: [
					'/static/swiper1.png',
					'/static/swiper1.png',
					'/static/swiper1.png'
				],
				bannerList: [{
						imageUrl: 'https://cdn.zhoukaiwen.com/zjx_banner.png'
					},
					{
						imageUrl: 'https://cdn.zhoukaiwen.com/zjx_banner3.png'
					},
					{
						imageUrl: 'https://cdn.zhoukaiwen.com/zjx_banner1.png'
					},
					{
						imageUrl: 'https://cdn.zhoukaiwen.com/zjx_banner2.png'
					}
				],
				categories: [{
						cuIcon: 'hotfill',
						color: 'red',
						// badge: '优惠',
						// mid: '1',
						path: "/pages/dz_order/order_cread",
						name: '订单创建'
					},
					{
						cuIcon: 'colorlens',
						color: 'orange',
						// badge: 1,
						// mid: '2',
						path: "/pages/dz_scheduling/scheduling_cread",
						name: '排课创建'
					},
					{
						cuIcon: 'goodsnewfill',
						color: 'pink',
						// badge: 12,
						path: "/pages/dz_order/order_list",
						name: '订单列表'
					},
					{
						cuIcon: 'upstagefill',
						color: 'olive',
						// badge: 22,
						path: "/pages/dz_order/order_details",
						name: '订单详情'
					},

					{
						cuIcon: 'medalfill',
						color: 'cyan',
						// badge: 22,
						
						// path: "/pages/order/order_details",
						name: '化学'
					},

					{
						cuIcon: 'servicefill',
						color: 'mauve',
						// badge: 22,
						// mid: '4',
						name: '生物'
					},
					{
						cuIcon: 'global',
						color: 'green',
						// badge: 22,
						// mid: '4',
						name: '历史'
					},

					{
						cuIcon: 'friendaddfill',
						color: 'yellow',
						// badge: 22,
						// mid: '4',
						name: '政治'
					}
				],

				fn: [{
						name: "审批流程",
						icon: '/static/flow.png',
						path: "/pages/flow/flow",
						subPage: false //二级页面
					}, {
						name: "表单示例",
						icon: '/static/form.png',
						path: "/pages/form/form",
						subPage: true //二级页面
					},
					{
						name: "Table组件",
						icon: '/static/fc.png',
						path: "/pages/form/form",
						subPage: true //二级页面
					},
					{
						name: "菜单列表",
						icon: '/static/table.png',
						path: "/pages/menu/menu",
						subPage: false //二级页面
					},





				],
			}
		},
		onLoad() {
			var _this = this;
			// 获取手机状态栏高度
			uni.getSystemInfo({
				success: function(data) {
					// 将其赋值给this
					_this.height = data.statusBarHeight;
					_this.getLocationInfo();
					_this.getNoticelist();
				}
			})


		},
		onShow() {},
		onPullDownRefresh() {
			console.log('refresh');
			this.noticelist = [],
				// setTimeout(function () {
				// 	uni.stopPullDownRefresh();
				// }, 1000);

				this.getNoticelist();
		},
		methods: {
			getNoticelist() {
				let that = this
				this.http.get("wechat/teacher/list", this.editFormFields, "").then(data => {
					uni.stopPullDownRefresh();

					if (data.code == 200) {

						that.noticelist = data.rows;

					} else {

						that.$toast(data.msg)
					}
				})


			},
			handleClick(item) {
				// console.log(item.id)
				uni.navigateTo({
					url: '/pages/dz_teacher/dz_teacher_details?id=' + item.id

				});
			},
			Go_teacher() {
				let UserInfo = this.$store.getters.getUserInfo();
				if (UserInfo != null) {
					uni.navigateTo({
						url: '/pages/dz_teacher/dz_teacher_edit'

					});

				} else {
					uni.navigateTo({
						url: '/pages/login/login'

					});
				}
			},
			Go_Student() {
				let UserInfo = this.$store.getters.getUserInfo();
				if (UserInfo != null) {
					uni.navigateTo({
						url: '/pages/dz_student/dz_student_edit'

					});

				} else {
					// 当前页面A

					uni.navigateTo({
						url: '/pages/login/login'

					});
				}
			},

			goCategorieslist(e) {
				var path = e.path;
				uni.navigateTo({
					url: path
				})
				// getApp().globalData.name = coursename;


				// uni.switchTab({
				// 	url: '/pages/dz_teacher/dz_teacher_list'
				// });
			},
			//获取位置
			getLocationInfo() {
				const self = this;
				uni.getLocation({
					type: 'gcj02',
					altitude: true,
					geocode: true,
					accuracy: 'best',
					isHighAccuracy: true,
					success(res) {
						console.log(res);
						self.position.latitude = res.latitude;
						self.position.longitude = res.longitude;


						let qqmapsdk = new QQMapWX({
							key: 'IMBBZ-WQCEQ-M3A5G-4NXE3-GPHG2-ICFR5'
						});
						// console.log(res.longitude, res.latitude, '经纬度')
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: res.latitude,
								longitude: res.longitude
							},
							success: (re) => {
								// console.log('详细地址信息', re.result.address, ); //这里边就是你需要的定位数据了
								self.position.address = re.result.address;

								self.$store.commit("setPosition", self.position);
							},
							fail: (re) => {
								console.log(re, '失败信息');
							}
						})







					},
					fail(re) {
						console.log(re, '失败信息');
					}
				});
			},

			getStyle(item) {
				return {
					paddingTop: 20 + 'rpx',
					background: item.color,
					padding: '50%',
					color: "#ffff",
					'border-radius': '50%',
					left: '-24rpx'
				}
			},
			gridClick(index) {
				const item = this.fn[index];
				if (!item.path) {
					return;
				}
				//注意下面的跳转方式，一级页面指pages.json中tabBar配置path
				//具体见uni页面跳转文档
				if (item.subPage) {
					//二级页面用navigateTo跳转
					uni.navigateTo({
						url: this.fn[index].path
					})
					return;
				}
				//一级页面
				uni.switchTab({
					url: this.fn[index].path
				})
			},
			swiperClick(index) {

			}
		}
	}
</script>
<style lang="less" scoped>
	.home-content {
		z-index: 999;
		position: relative;
		margin-top: -220rpx;
	}

	.app-name {
		text-align: center;
		color: #ffff;
		font-weight: bolder;
		font-size: 60rpx;
		top: -40rpx;
		position: relative;
	}

	.card-container {

		box-shadow: 1px 1px 9px #b9b6b629;
		margin: 30rpx 30rpx 30rpx 30rpx;
		border: 1px solid #f1f1f1;
		border-radius: 10rpx;
		padding: 26rpx 10rpx 14rpx 10rpx;
		background: #ffff;


		.fn-title {
			font-family: 黑体;
			font-size: 30rpx;
			font-weight: bold;
			//color: #8f9ca2;
			padding: 4rpx 20rpx 30rpx 20rpx;
		}

		.grid-text {
			padding-top: 8rpx;
			font-size: 26rpx;
			color: #626262;
			padding-bottom: 20rpx;
		}

	}

	.grid-item-bg {
		border-radius: 50%;
		width: 86rpx;
		height: 86rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 5px 3px 6px #e0ddddb0;
	}

	.grid-item-bg-1 {
		background-image: linear-gradient(to bottom right, #97caff, #47a1fe);
	}

	.grid-item-bg-2 {
		background-image: linear-gradient(to bottom right, #f8bcbc, #f07e7e);

	}

	.grid-item-bg-3 {
		background-image: linear-gradient(to bottom right, #afb5e6, #808cf0);
	}

	.grid-item-bg-4 {

		background-image: linear-gradient(to bottom right, #98e4e2, #56c3bf);
	}

	.grid-item-bg-5 {
		background-image: linear-gradient(to bottom right, #d1d1d1, #c878e7);
	}

	.grid-item-bg-6 {
		background-image: linear-gradient(to bottom right, #97caff, #47a1fe);
	}

	.grid-item-bg-7 {
		background-image: linear-gradient(to bottom right, #98e4e2, #56c3bf);

	}

	.grid-item-bg-8 {
		background-image: linear-gradient(to bottom right, #afb5e6, #808cf0);

	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}



	.message-box {
		width: 100%;
		height: 120rpx;
		background: url(https://zhoukaiwen.com/img/icon/clock.gif) #FFFFFF;
		background-repeat: no-repeat;
		background-size: 100rpx 100rpx;
		background-position: 15rpx 10rpx;
		margin: 0rpx 0rpx 10rpx 0rpx;
		padding-left: 130rpx;

		.message-tltle {
			height: 65rpx;
			line-height: 70rpx;
			font-weight: 600;
			font-size: 28rpx;
		}

		.message-content {
			color: #0081ff;

			span {
				background-color: #0081ff;
				color: #FFFFFF;
				padding: 2rpx 8rpx;
				border-radius: 8rpx;
				margin-right: 8rpx;
			}
		}
	}

	/*scroll-view外层*/
	.skill-sequence-panel-content-wrapper {
		position: relative;
		white-space: nowrap;
		padding: 10rpx 0 10rpx 10rpx;
	}

	/*左右渐变遮罩*/
	.hide-content-box {
		position: absolute;
		top: 0;
		height: 100%;
		width: 10px;
		z-index: 2;
	}

	.hide-content-box-left {
		left: 0;
		background-image: linear-gradient(to left, rgba(255, 255, 255, 0), #f3f3f3 60%);
	}

	.hide-content-box-right {
		right: 0;
		background-image: linear-gradient(to right, rgba(255, 255, 255, 0), #f3f3f3 60%);
	}

	.kite-classify-scroll {
		width: 100%;
		height: 380rpx;
		overflow: hidden;
		white-space: nowrap;
	}

	.kite-classify-cell {
		display: inline-block;
		width: 266rpx;
		height: 370rpx;
		margin-right: 20rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		overflow: hidden;
		box-shadow: 2px 2px 3px rgba(26, 26, 26, 0.2);
	}

	.nav-li {
		padding: 40rpx 30rpx;
		width: 100%;
		background-image: url(https://s1.ax1x.com/2020/06/27/NyU04x.png);
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
	}

	.nav-name {
		font-size: 28upx;
		text-transform: Capitalize;
		margin-top: 20upx;
		position: relative;
	}

	.nav-name::before {
		content: '';
		position: absolute;
		display: block;
		width: 40rpx;
		height: 6rpx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}

	.nav-name::after {
		content: '';
		position: absolute;
		display: block;
		width: 100rpx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40rpx;
		opacity: 0.3;
	}

	.nav-content {
		width: 100%;
		padding: 15rpx;
		display: inline-block;
		overflow-wrap: break-word;
		white-space: normal;
	}

	.nav-btn {
		width: 200rpx;
		height: 60rpx;
		margin: 8rpx auto;
		text-align: center;
		line-height: 60rpx;
		border-radius: 10rpx;
	}

	.bg-index1 {
		background-color: #19cf8a;
		color: #fff;
	}

	.bg-index2 {
		background-color: #954ff6;
		color: #fff;
	}

	.bg-index3 {
		background-color: #5177ee;
		color: #fff;
	}

	.bg-index4 {
		background-color: #f49a02;
		color: #fff;
	}

	.bg-index5 {
		background-color: #ff4f94;
		color: #fff;
	}

	.bg-index6 {
		background-color: #7fd02b;
		color: #fff;
	}

	.item-name {
		margin-bottom: 15rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.flex_all {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 220rpx;
	}

	.jn_img {

		// display: block;

		// margin: 15rpx auto;
		margin: 1rpx 10rpx 1rpx 10rpx;
		height: 200rpx;
		border-radius: 20rpx;
	}

	.jn_img2 {
		// width: 700rpx;
		// display: block;
		margin: 1rpx 10rpx 1rpx 10rpx;
		// margin-left: 20rpx;
		// margin: 15rpx auto;
		height: 200rpx;
		border-radius: 20rpx;
	}

	.uni-padding-wrap {
		height: 360rpx;
		margin-bottom: 20rpx;
	}

	.swiper {
		height: 100%;
	}

	.type_text {
		color: red
	}


	.label {
		// margin-bottom: 40rpx;
		font-size: 24rpx;
		color: #82848f;
	}

	.money {
		font-size: 38rpx;
		font-weight: 700
	}

	.Area {
		font-size: 38rpx;
		font-weight: 400;
		color: #55aaff;
	}

	.Describefather {
		height: 100%;
		// margin-right: 130rpx;
		margin-top: 30rpx;
		padding: 10rpx;
	}

	.Describe {

		font-size: 32rpx;
		// font-weight: 700;
		width: 100%;
		overflow-wrap: break-word;
		line-height: 52rpx;
		// margin: 16rpx 16rpx 26rpx 0;

	}

	.wrapper {
		background-color: #fff;
		padding: 30rpx 24rpx;
		margin-top: 30rpx;
	}

	.margin30 {
		margin-top: 10rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.address {
		margin-top: 30rpx;
	}

	.top30 {
		margin-top: 30rpx;
	}

	.picBox {
		width: 750rpx;
		background-color: #1a1a1a;

		.picMain {
			width: 750rpx;
			height: 380rpx;
			padding: 10rpx 30rpx 30rpx 30rpx;

			.picL {
				width: 430rpx;
				height: 100%;

				image {
					border-radius: 8rpx;
					width: 100%;
					height: 100%;
				}
			}

			.picB {
				width: 250rpx;
				height: 100%;
				display: flex;
				flex-flow: column; //垂直排列
				justify-content: space-between; //两端对齐

				image {
					border-radius: 8rpx;
					width: 100%;
					height: 48%;
				}
			}
		}
	}

	.title-header {
		display: flex;
		height: 120rpx;
		font-size: 40rpx;
		align-items: center;
		justify-content: center;
		/* padding: 40rpx 0 0 0; */
		font-weight: bold;
		background-image: url(https://s1.ax1x.com/2020/09/16/wccswF.png);
		background-size: cover;
	}

	.title-text {
		background-image: -webkit-linear-gradient(0deg, #ff8a34, #FBBD12);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.cu-card>.cu-item {
		margin: 0 30rpx 30rpx 30rpx;
	}

	.PhotographerBoxL {
		width: 35%;
		text-align: center;
		padding: 25rpx;
		margin-top: 15rpx;
		float: left;
	}

	.PhotographerBoxR {
		width: 65%;
		padding: 25rpx;
		float: left;

		.PhotoPpl {
			width: 100%;

			image {
				border-radius: 8rpx;
				width: 128rpx;
				height: 128rpx;
			}
		}
	}

	.cu-tag2 {
		height: 40rpx !important;
		font-size: 22rpx;
		vertical-align: middle;
		position: relative;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding: 0rpx 16rpx;
		font-family: Helvetica Neue, Helvetica, sans-serif;
		white-space: nowrap;
	}

	.goPhotographer {
		width: 96%;
		margin: 0 2%;
		border-top: 1rpx #CCCCCC dashed;
	}

	.text {
		overflow: hidden;
		-webkit-line-clamp: 3;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.mtop2 {
		margin-top: 10rpx;
		background-color: white;
	}

	// 暂无数据
	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 300rpx;
			border-radius: 50%;
			margin: 0 auto;
		}

		.tips {
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background: linear-gradient(270deg, #1cbbb4 0%, #0081ff 100%);
		}
	}
</style>
